import * as echarts from 'echarts'
globalThis.echarts = echarts

var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']

let color = '#0c3159';

var xData = function() {
  var data = [];
  for (var i = 1; i < 13; i++) {
    data.push(i + "月份");
  }
  return data;
}();


import {lineOption2} from '../chart/transform'

let groups = [
  {
    label: '线段',
    key: 'line',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/line1.png'),
        },
        data() {
          return {
            widget: 'z-chart',
            widgetConfig: {
              option:  {
                title: {
                  text: '2019年销售水量和主营业务收入对比',
                  textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 20,
                  },
                  top: '3%',
                  left: '10%',
                },
                backgroundColor: color,
                grid: {
                  top: "25%",
                  bottom: "10%"//也可设置left和right设置距离来控制图表的大小
                },
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                    label: {
                      show: true
                    }
                  }
                },
                legend: {
                  data: ["销售水量", "主营业务"],
                  top: "15%",
                  textStyle: {
                    color: "#ffffff"
                  }
                },
                xAxis: {
                  data: [
                    "当年完成水量",
                    "去年同期水量",
                    "滚动目标值水量",
                    "全年目标值水量",
                    "当年完成金额",
                    "去年同期金额",
                    "滚动目标金额",
                    "全年目标值",

                  ],
                  axisLine: {
                    show: true, //隐藏X轴轴线
                    lineStyle: {
                      color: '#01FCE3'
                    }
                  },
                  axisTick: {
                    show: true //隐藏X轴刻度
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: "#ebf8ac" //X轴文字颜色
                    }
                  },

                },
                yAxis: [{
                  type: "value",
                  name: "亿元",
                  nameTextStyle: {
                    color: "#ebf8ac"
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: true
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: '#FFFFFF'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: "#ebf8ac"
                    }
                  },

                },
                  {
                    type: "value",
                    name: "同比",
                    nameTextStyle: {
                      color: "#ebf8ac"
                    },
                    position: "right",
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    axisLabel: {
                      show: true,
                      formatter: "{value} %", //右侧Y轴文字显示
                      textStyle: {
                        color: "#ebf8ac"
                      }
                    }
                  },
                  {
                    type: "value",
                    gridIndex: 0,
                    min: 50,
                    max: 100,
                    splitNumber: 8,
                    splitLine: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    },
                    axisLabel: {
                      show: false
                    },
                    splitArea: {
                      show: true,
                      areaStyle: {
                        color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                      }
                    }
                  }
                ],
                series: [{
                  name: "销售水量",
                  type: "line",
                  yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                  smooth: true, //平滑曲线显示
                  showAllSymbol: true, //显示所有图形。
                  symbol: "circle", //标记的图形为实心圆
                  symbolSize: 10, //标记的大小
                  itemStyle: {
                    //折线拐点标志的样式
                    color: "#058cff"
                  },
                  lineStyle: {
                    color: "#058cff"
                  },
                  areaStyle:{
                    color: "rgba(5,140,255, 0.2)"
                  },
                  data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
                },
                  {
                    name: "主营业务",
                    type: "bar",
                    barWidth: 15,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: "#00FFE3"
                        },
                          {
                            offset: 1,
                            color: "#4693EC"
                          }
                        ])
                      }
                    },
                    data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
                  }
                ]
              }
            }
          }
        }
      },
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/line2.jpg'),
        },
        data() {
          return {
            widget: 'z-chart',
            widgetConfig: {
              option:   {
                backgroundColor: "#344b58",
                "title": {
                  "text": "本年商场顾客男女人数统计",
                  x: "4%",

                  textStyle: {
                    color: '#fff',
                    fontSize: '22'
                  },
                  subtextStyle: {
                    color: '#90979c',
                    fontSize: '16',

                  },
                },
                "tooltip": {
                  "trigger": "axis",
                  "axisPointer": {
                    "type": "shadow",
                    textStyle: {
                      color: "#fff"
                    }

                  },
                },
                "grid": {
                  "borderWidth": 0,
                  "top": 110,
                  "bottom": 95,
                  textStyle: {
                    color: "#fff"
                  }
                },
                "legend": {
                  x: '4%',
                  top: '8%',
                  textStyle: {
                    color: '#90979c',
                  },
                  "data": ['女', '男', '平均']
                },


                "calculable": true,
                "xAxis": [{
                  "type": "category",
                  "axisLine": {
                    lineStyle: {
                      color: '#90979c'
                    }
                  },
                  "splitLine": {
                    "show": false
                  },
                  "axisTick": {
                    "show": false
                  },
                  "splitArea": {
                    "show": false
                  },
                  "axisLabel": {
                    "interval": 0,

                  },
                  // "data": xData,
                  ...lineOption2.xAxis
                }],
                "yAxis": [{
                  "type": "value",
                  "splitLine": {
                    "show": false
                  },
                  "axisLine": {
                    lineStyle: {
                      color: '#90979c'
                    }
                  },
                  "axisTick": {
                    "show": false
                  },
                  "axisLabel": {
                    "interval": 0,

                  },
                  "splitArea": {
                    "show": false
                  },

                }],
                "dataZoom": [{
                  "show": true,
                  "height": 30,
                  "xAxisIndex": [
                    0
                  ],
                  bottom: 30,
                  "start": 10,
                  "end": 80,
                  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                  handleSize: '110%',
                  handleStyle:{
                    color:"#d3dee5",

                  },
                  textStyle:{
                    color:"#fff"},
                  borderColor:"#90979c"


                }, {
                  "type": "inside",
                  "show": true,
                  "height": 15,
                  "start": 1,
                  "end": 35
                }],
                "series": [{
                  "name": "女",
                  "type": "bar",
                  "stack": "总量",
                  "barMaxWidth": 35,
                  "barGap": "10%",
                  "itemStyle": {
                    "normal": {
                      "color": "rgba(255,144,128,1)",
                      "label": {
                        "show": true,
                        "textStyle": {
                          "color": "#fff"
                        },
                        "position": "inside",
                        formatter: function(p) {
                          return p.value > 0 ? (p.value) : '';
                        }
                      }
                    }
                  },
                  // "data": [
                  //   709,
                  //   1917,
                  //   2455,
                  //   2610,
                  //   1719,
                  //   1433,
                  //   1544,
                  //   3285,
                  //   5208,
                  //   3372,
                  //   2484,
                  //   4078
                  // ],
                  ...lineOption2.series[0]
                },

                  {
                    "name": "男",
                    "type": "bar",
                    "stack": "总量",
                    "itemStyle": {
                      "normal": {
                        "color": "rgba(0,191,183,1)",
                        "barBorderRadius": 0,
                        "label": {
                          "show": true,
                          "position": "inside",
                          formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                          }
                        }
                      }
                    },
                    // "data": [
                    //   327,
                    //   1776,
                    //   507,
                    //   1200,
                    //   800,
                    //   482,
                    //   204,
                    //   1390,
                    //   1001,
                    //   951,
                    //   381,
                    //   220
                    // ]
                    ...lineOption2.series[1]
                  }, {
                    "name": "总数",
                    "type": "line",
                    symbolSize:10,
                    symbol:'circle',
                    "itemStyle": {
                      "normal": {
                        "color": "rgba(252,230,48,1)",
                        "barBorderRadius": 0,
                        "label": {
                          "show": true,
                          "position": "top",
                          formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                          }
                        }
                      }
                    },
                    // "data": [
                    //   1036,
                    //   3693,
                    //   2962,
                    //   3810,
                    //   2519,
                    //   1915,
                    //   1748,
                    //   4675,
                    //   6209,
                    //   4323,
                    //   2865,
                    //   4298
                    // ]
                    ...lineOption2.series[2]
                  },
                ]
              }
            }
          }
        }
      },
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/line3.jpg'),
        },
        data() {
          return {
            widget: 'z-chart',
            widgetConfig: {
              option: {
                backgroundColor: "#1A1835",

                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                    textStyle: {
                      color: "#fff"
                    }

                  },
                },
                grid: {
                  borderWidth: 0,
                  top: 110,
                  bottom: 95,
                  textStyle: {
                    color: "#fff"
                  }
                },
                legend: {
                  x: '46%',
                  top: '11%',
                  textStyle: {
                    color: '#90979c',
                  },
                  data: ['访问量', '订单量']
                },


                calculable: true,
                xAxis: [{
                  type: "category",
                  axisLine: {
                    lineStyle: {
                      color: "rgba(204,187,225,0.5)",
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  data: xData,
                }],

                yAxis: [{
                  type: "value",
                  splitLine: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: "rgba(204,187,225,0.5)",
                    }
                  },

                }],
                dataZoom: [{
                  show: true,
                  height: 30,
                  xAxisIndex: [0],
                  bottom: 30,

                  "start": 10,
                  "end": 80,
                  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                  handleSize: '110%',
                  handleStyle: {
                    color: "#5B3AAE",
                  },
                  textStyle:{
                    color:"rgba(204,187,225,0.5)",
                  },
                  fillerColor:"rgba(67,55,160,0.4)",
                  borderColor: "rgba(204,187,225,0.5)",

                }, {
                  type: "inside",
                  show: true,
                  height: 15,
                  start: 1,
                  end: 35
                }],
                series: [{
                  name: "访问量",
                  type: "line",
                  symbolSize: 10,
                  symbol: 'circle',
                  itemStyle: {
                    color: "#6f7de3",
                  },
                  markPoint: {
                    label: {
                      normal: {
                        textStyle: {
                          color: '#fff'
                        }
                      }
                    },
                    data: [{
                      type: 'max',
                      name: '最大值',

                    }, {
                      type: 'min',
                      name: '最小值'
                    }]
                  },
                  data: [
                    509, 917, 2455, 2610, 2719, 3033, 3044, 3085, 2708, 2809, 2117,2000,1455,1210,719,
                    733,944,2285,2208,3372,3936,3693,2962,2810,3519,2455,2610,2719,2484,2078
                  ],
                }, {
                  name: "订单量",
                  type: "line",
                  symbolSize: 10,
                  symbol: 'circle',
                  itemStyle: {
                    color: "#c257F6",
                  },
                  markPoint: {
                    label: {
                      normal: {
                        textStyle: {
                          color: '#fff'
                        }
                      }
                    },
                    data: [{
                      type: 'max',
                      name: '最大值',

                    }, {
                      type: 'min',
                      name: '最小值'
                    }]
                  },
                  data: [
                    2136,3693,2962,3810,3519,3484,3915,3823,3455,4310,4019,3433,3544,3885,4208,3372,
                    3484,3915,3748,3675,4009,4433,3544,3285,4208,3372,3484,3915,3823,4265,4298
                  ]
                }, ]
              }
            }
          }
        }
      },
    ]
  },
  {
    label: '柱状图',
    key: 'column',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/line2.png'),
        },
        data() {
          return {
            reload: true,
            widget: 'z-chart',
            widgetConfig: {
              option: {
                backgroundColor: color,
                tooltip: {
                  trigger: 'axis',
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                grid: {
                  left: '2%',
                  right: '4%',
                  bottom: '14%',
                  top:'16%',
                  containLabel: true
                },
                legend: {
                  data: ['1', '2', '3'],
                  right: 10,
                  top:12,
                  textStyle: {
                    color: "#fff"
                  },
                  itemWidth: 12,
                  itemHeight: 10,
                  // itemGap: 35
                },
                xAxis: {
                  type: 'category',
                  // data: ['2012','2013','2014','2015','2016','2017','2018','2019'],
                  axisLine: {
                    lineStyle: {
                      color: 'white'

                    }
                  },
                  axisLabel: {
                    // interval: 0,
                    // rotate: 40,
                    textStyle: {
                      fontFamily: 'Microsoft YaHei'
                    }
                  },
                  ...lineOption2.xAxis
                },

                yAxis: {
                  type: 'value',
                  // max:'1200',
                  axisLine: {
                    show: false,
                    lineStyle: {
                      color: 'white'
                    }
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: 'rgba(255,255,255,0.3)'
                    }
                  },
                  axisLabel: {}
                },
                "dataZoom": [{
                  "show": true,
                  "height": 12,
                  "xAxisIndex": [
                    0
                  ],
                  bottom:'8%',
                  "start": 10,
                  "end": 90,
                  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                  handleSize: '110%',
                  handleStyle:{
                    color:"#d3dee5",

                  },
                  textStyle:{
                    color:"#fff"},
                  borderColor:"#90979c"
                }, {
                  "type": "inside",
                  "show": true,
                  "height": 15,
                  "start": 1,
                  "end": 35
                }],
                series: [{
                  name: '1',
                  type: 'bar',
                  barWidth: '15%',
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                      }, {
                        offset: 1,
                        color: '#f5804d'
                      }]),
                      barBorderRadius: 12,
                    },
                  },
                  // data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
                  ...lineOption2.series[0]
                },
                  {
                    name: '2',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#8bd46e'
                        }, {
                          offset: 1,
                          color: '#09bcb7'
                        }]),
                        barBorderRadius: 11,
                      }

                    },
                    // data: [400, 500, 500, 500, 500, 400,400, 500, 500]
                    ...lineOption2.series[1]
                  },
                  {
                    name: '3',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#248ff7'
                        }, {
                          offset: 1,
                          color: '#6851f1'
                        }]),
                        barBorderRadius: 11,
                      }
                    },
                    // data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
                    ...lineOption2.series[2]
                  }]
              }
            }
          }
        }
      },
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/column2.jpg'),
        },
        data() {
          return {
            widget: 'z-chart',
            widgetConfig: {
              option: {
                title: {
                  text: 'World Population'
                },
                backgroundColor: color,
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                legend: {
                  textStyle: {

                  }
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: {
                  type: 'value',
                  boundaryGap: [0, 0.01],
                  lineStyle: {

                  }
                },
                yAxis: {
                  lineStyle: {

                  },
                  type: 'category',
                  data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                },
                series: [
                  {
                    name: '2011',
                    type: 'bar',
                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                  },
                  {
                    name: '2012',
                    type: 'bar',
                    data: [19325, 23438, 31000, 121594, 134141, 681807]
                  }
                ]
              }
            }
          }
        }
      },
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/column3.png'),
        },
        data() {
          return {
            widget: 'z-chart',
            widgetConfig:  {
              option: {
                backgroundColor: color,
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                legend: {},
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [
                  {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  }
                ],
                yAxis: [
                  {
                    type: 'value'
                  }
                ],
                series: [
                  {
                    name: 'Direct',
                    type: 'bar',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                  },
                  {
                    name: 'Email',
                    type: 'bar',
                    stack: 'Ad',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                  },
                  {
                    name: 'Union Ads',
                    type: 'bar',
                    stack: 'Ad',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                  },
                  {
                    name: 'Video Ads',
                    type: 'bar',
                    stack: 'Ad',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                  },
                  {
                    name: 'Search Engine',
                    type: 'bar',
                    data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                    emphasis: {
                      focus: 'series'
                    },
                    markLine: {
                      lineStyle: {
                        type: 'dashed'
                      },
                      data: [[{ type: 'min' }, { type: 'max' }]]
                    }
                  },
                  {
                    name: 'Baidu',
                    type: 'bar',
                    barWidth: 5,
                    stack: 'Search Engine',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [620, 732, 701, 734, 1090, 1130, 1120]
                  },
                  {
                    name: 'Google',
                    type: 'bar',
                    stack: 'Search Engine',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [120, 132, 101, 134, 290, 230, 220]
                  },
                  {
                    name: 'Bing',
                    type: 'bar',
                    stack: 'Search Engine',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [60, 72, 71, 74, 190, 130, 110]
                  },
                  {
                    name: 'Others',
                    type: 'bar',
                    stack: 'Search Engine',
                    emphasis: {
                      focus: 'series'
                    },
                    data: [62, 82, 91, 84, 109, 110, 120]
                  }
                ]
              }
            }
          }
        }
      }
    ]
  },
  {
    label: '饼图',
    key: 'pie',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/line3.png'),
        },
        data() {
          return {
            widget: 'z-chart',
            widgetConfig: {
              option: {
                title: {
                  text: 'pieChart',
                  x: 'center',
                  y: 'center',
                  textStyle: {
                    fontSize: 20
                  }
                },
                backgroundColor: color,
                tooltip: {
                  trigger: 'item'
                },
                series: [{
                  type: 'pie',
                  center: ['50%', '50%'],
                  radius: ['24%', '45%'],
                  clockwise: true,
                  avoidLabelOverlap: true,
                  hoverOffset: 15,
                  itemStyle: {
                    // normal: {
                    //   color: function(params) {
                    //     return colorList[params.dataIndex]
                    //   }
                    // }
                  },
                  label: {
                    show: true,
                    position: 'outside',
                    formatter: '{a|{b}：{d}%}\n{hr|}',
                    rich: {
                      hr: {
                        /*
                再次声明一下，大家在这里修改之后不要点击上面的保存！
        不要点击保存！不要点击保存！重要的事情说三遍！
        你的修改会覆盖我的原代码的！感谢理解！
                                    --2020/8/4  by--suwanqing
                        */
                        backgroundColor: 't',
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12]
                      },
                      a: {
                        padding: [-30, 15, -20, 15]
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      length: 20,
                      length2: 30,
                      lineStyle: {
                        width: 1
                      }
                    }
                  },
                  data: [{
                    'name': '一月',
                    'value': 1.45
                  }, {
                    'name': '二月',
                    'value': 2.93
                  }, {
                    'name': '三月',
                    'value': 3.15
                  }, {
                    'name': '四月',
                    'value': 4.78
                  }, {
                    'name': '五月',
                    'value': 5.93
                  }, {
                    'name': '六月',
                    'value': 5.73
                  }
                  ],
                }]
              }
            }
          }
        }
      },
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/chart2.jpg'),
        },
        data() {
          return  {
            widget: 'z-chart',
            widgetConfig: {
              option: {
                legend: {
                  top: 'bottom'
                },
                backgroundColor: color,
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                series: [
                  {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                      borderRadius: 8
                    },
                    data: [
                      { value: 40, name: 'rose 1' },
                      { value: 38, name: 'rose 2' },
                      { value: 32, name: 'rose 3' },
                      { value: 30, name: 'rose 4' },
                      { value: 28, name: 'rose 5' },
                      { value: 26, name: 'rose 6' },
                      { value: 22, name: 'rose 7' },
                      { value: 18, name: 'rose 8' }
                    ]
                  }
                ]
              }
            }
          }
        }
      },
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/chart3.jpg'),
        },
        data() {
          return  {
            widget: 'z-chart',
            widgetConfig: {
              option: {
                tooltip: {
                  trigger: 'item'
                },
                backgroundColor: color,
                legend: {
                  top: '5%',
                  left: 'center',
                  textStyle: {
                    color: '#fff'
                  }
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2,
                    },
                    label: {
                      show: false,
                      position: 'center',
                      itemStyle: {

                      }
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold',

                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: [
                      { value: 1048, name: 'Search Engine' },
                      { value: 735, name: 'Direct' },
                      { value: 580, name: 'Email' },
                      { value: 484, name: 'Union Ads' },
                      { value: 300, name: 'Video Ads' }
                    ]
                  }
                ]
              }
            }
          }
        }
      },
    ]
  }
]

export default groups
